<script lang="ts" setup>
import { Summary } from '@/types/data';
import router from "@/router";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { posts, comments } = useStore();
const { list } = storeToRefs(posts);
const { nowPost } = storeToRefs(comments);
const { getSummary } = posts;
const props = defineProps<{
	idx: number
}>()
const handleClick = () => {
	nowPost.value = list.value[props.idx];
	router.push('/detail/' + list.value[props.idx].postId);
}
const title: Summary = getSummary(list.value[props.idx].postTitle, 20);
const content: Summary = getSummary(list.value[props.idx].postContent, 60);
</script>
<template>
	<div class="post-bar-content">
		<a @click="handleClick" href="javascript:;" class="post-bar-content-header">
			{{ title.sum }}<template v-if="title.dots">...</template>
		</a>
		<div class="post-bar-content-body">
			{{ content.sum }}<template v-if="content.dots">...</template>
		</div>
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.post-bar-content {
	float: left;
	width: 63%;
	padding-left: 20px;

	.post-bar-content-header {
		display: block;
		font-weight: bold;
		font-size: larger;
		margin-bottom: 10px;
		text-decoration: none;
		color: #333;
	}

	.post-bar-content-header:hover {
		text-decoration: underline;
		color: $theme;
	}

	.post-bar-content-body {
		color: #666;
	}
}
</style>
